<template>
  <div class="oneboard">
    <div class="oneboard-one">
      <div>今日QC数据统计</div>
      <div>
        <div>
          <div>质检总数</div>
          <div>{{ datastatistics && datastatistics.today.total }}</div>
        </div>
        <div></div>
        <div>
          <div>合格数</div>
          <div>{{ datastatistics && datastatistics.today.pass }}</div>
        </div>
        <div></div>
        <div @click="onLookBoard(0)">
          <div>不合格数</div>
          <div>
            {{ datastatistics && datastatistics.today.nopass }}
            <span style="color: red">(点击查看)</span>
          </div>
        </div>
        <div></div>
        <div>
          <div>合格率</div>
          <div>{{ datastatistics && (datastatistics.today.rate * 100).toFixed(2) }}%</div>
        </div>
      </div>
    </div>
    <div class="oneboard-one">
      <div>一周QC数据统计</div>
      <div>
        <div>
          <div>质检总数</div>
          <div>{{ datastatistics && datastatistics.seven.total }}</div>
        </div>
        <div></div>
        <div>
          <div>合格数</div>
          <div>{{ datastatistics && datastatistics.seven.pass }}</div>
        </div>
        <div></div>
        <div @click="onLookBoard(1)">
          <div>不合格数</div>
          <div>
            {{ datastatistics && datastatistics.seven.nopass }}
            <span style="color: red">(点击查看)</span>
          </div>
        </div>
        <div></div>
        <div>
          <div>合格率</div>
          <div>{{ datastatistics && (datastatistics.seven.rate * 100).toFixed(2) }}%</div>
        </div>
      </div>
    </div>
    <div class="oneboard-one">
      <div>历史QC数据统计</div>
      <div>
        <div>
          <div>质检总数</div>
          <div>{{ datastatistics && datastatistics.history.total }}</div>
        </div>
        <div></div>
        <div>
          <div>合格数</div>
          <div>{{ datastatistics && datastatistics.history.pass }}</div>
        </div>
        <div></div>
        <div>
          <div>不合格数</div>
          <div>{{ datastatistics && datastatistics.history.nopass }}</div>
        </div>
        <div></div>
        <div>
          <div>合格率</div>
          <div>{{ datastatistics && (datastatistics.history.rate * 100).toFixed(2) }}%</div>
        </div>
      </div>
    </div>
    <div class="oneboard-two">
      <div id="postponenum" class="echartsStyle"></div>
      <div id="postponenumno" class="echartsStyle"></div>
    </div>
    <div class="oneboard-two">
      <div id="postponenumline" class="echartsStyleLine"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { postApiCodeGetQclookban } from "@/api";
import {
  postponenum,
  postponenumno,
  postponenumline,
} from "../QCBoard/postponenum.js";
export default {
  data() {
    return {
      datastatistics: ""
    };
  },
  async activated() {
    await this.postApiCodeGetQclookban();
    await this.postponenum(postponenum(this.datastatistics));
    await this.postponenumno(postponenumno(this.datastatistics));
    await this.postponenumline(postponenumline(this.datastatistics));
  },
  methods: {
    async postponenum(data) {
      let myChart = echarts.init(document.getElementById("postponenum"));
      // 绘制图表
      myChart.setOption(data);
    },
    async postponenumno(data) {
      let myChart = echarts.init(document.getElementById("postponenumno"));
      // 绘制图表
      myChart.setOption(data);
    },
    async postponenumline(data) {
      let myChart = echarts.init(document.getElementById("postponenumline"));
      // 绘制图表
      myChart.setOption(data);
    },
    
    // 看板数据--统计
    async postApiCodeGetQclookban() {
      await postApiCodeGetQclookban().then((res) => {
        console.log("看板数据--统计", res);
        this.datastatistics = res.data;
      });
    },
    // 看板管理
    onLookBoard(e) {
      this.$router.push({ name: "QCAweekBoard", query: { type: e } });
    },
    
  },
};
</script>

<style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.echartsStyleLine{
  width: calc(100% - 40px);
  height: 400px;
  background: #fff;
}
.echartsStyle {
  width: calc(50% - 40px);
  height: 400px;
  background: #fff;
}
.oneboard {
  > div {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  &-one {
    > div:nth-child(1) {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 20px;
    }
    > div:nth-child(2) {
      display: flex;
      justify-content: space-around;
      align-items: center;
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        > div:nth-child(1) {
          color: #999;
          font-size: 14px;
          padding-bottom: 10px;
        }
        > div:nth-child(2) {
          font-size: 18px;
          font-weight: 600;
        }
      }
      > div:nth-child(2n) {
        width: 1px;
        height: 15px;
        background: #f0f1f7;
      }
    }
  }
  &-two {
    display: flex;
    justify-content: space-between;
  }
}
</style>